<template>
  <div>
    <!-- 悬浮球 -->
    <div
      ref="ball"
      class="drag-ball"
      :style="{
        left: position.x + 'px',
        top: position.y + 'px',
        zIndex: 9999,
        transition: isDragging ? 'none' : 'all 0.3s ease'
      }"
      @mousedown="startDrag"
      @touchstart="startDrag"
    >
      <div id="side-windows">
        <div class="shrink">
          <div class="problem-feedback">
            <img :src="feedback" class="logo" />
          </div>
        </div>
      </div>
    </div>

    <!-- 悬浮窗口 -->
    <div
      v-if="showWindow"
      class="floating-window"
      :style="{
        left: windowPosition.x + 'px',
        top: windowPosition.y + 'px',
        zIndex: 9998
      }"
    >
      <div class="window-content">
        <h4>会议控制面板</h4>
        <div class="content">最近待办事项：{{ todo }}</div>
        <div class="content">截止时间：{{ ddl }}</div>
        <button @click="toggleRightSide">
          进入房间
        </button>
      </div>
    </div>

    <!-- 点击外部关闭的遮罩 -->
    <div
      v-if="showWindow"
      class="window-mask"
      @click="showWindow = false"
    ></div>
  </div>
</template>

<script setup>
import  useTodoStore  from '@/store/modules/todo'
import { ref, onMounted, onUnmounted, watch } from 'vue'
import feedbackImg from '@/assets/images/logo.svg'

//从全局获取待做内容
const todoStore = useTodoStore();
let todo = '加载中...'
let ddl = '加载中...'


const props = defineProps({
  distanceRight: { type: Number, default: 50 },
  distanceBottom: { type: Number, default: 100 },
  snapThreshold: { type: Number, default: 100 }
})

// 状态管理
const ball = ref(null)
const feedback = ref(feedbackImg)
const position = ref({ x: 0, y: 0 })
const windowPosition = ref({ x: 0, y: 0 })
const isDragging = ref(false)
const showWindow = ref(false)
const startOffset = ref({ x: 0, y: 0 })
const dragStartPosition = ref({ x: 0, y: 0 })
const ballSize = ref({ width: 0, height: 0 })
const windowSize = ref({ width: 0, height: 0 })
const windowWidth = 300
const windowHeight = 200
const dragThreshold = 5 // 移动阈值，小于这个值视为点击

// 初始化
onMounted(() => {
  updateWindowSize()
  window.addEventListener('resize', updateWindowSize)

  if (ball.value) {
    const rect = ball.value.getBoundingClientRect()
    ballSize.value = { width: rect.width, height: rect.height }
    position.value = {
      x: windowSize.value.width - ballSize.value.width - props.distanceRight,
      y: windowSize.value.height - ballSize.value.height - props.distanceBottom
    }
    updateWindowPosition()
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', updateWindowSize)
})

// 更新窗口尺寸
const updateWindowSize = () => {
  windowSize.value = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  }
  updateWindowPosition()
}

// 更新悬浮窗口位置
const updateWindowPosition = () => {
  let x = position.value.x - windowWidth / 2 + ballSize.value.width / 2
  let y = position.value.y - windowHeight - 10

  x = Math.max(0, Math.min(windowSize.value.width - windowWidth, x))
  y = Math.max(0, Math.min(windowSize.value.height - windowHeight, y))

  windowPosition.value = { x, y }
}

// 切换悬浮窗口显示状态
const toggleWindow = (e) => {
  showWindow.value = !showWindow.value
  updateWindowPosition()
}

// 开始拖动
const startDrag = (e) => {
  if(todoStore.todos.length>0) {
    todo = todoStore.todos.at(0)?.todo ?? '';
    ddl = todoStore.todos.at(0)?.ddl ?? '';
  }
  isDragging.value = true
  const clientX = e.clientX || e.touches[0].clientX
  const clientY = e.clientY || e.touches[0].clientY

  dragStartPosition.value = { x: clientX, y: clientY }

  startOffset.value = {
    x: clientX - position.value.x,
    y: clientY - position.value.y
  }

  document.addEventListener('mousemove', dragMove)
  document.addEventListener('mouseup', endDrag)
  document.addEventListener('touchmove', dragMove, { passive: false })
  document.addEventListener('touchend', endDrag)

  e.preventDefault()
}

// 拖动中
const dragMove = (e) => {
  if (!isDragging.value) return

  const clientX = e.clientX || (e.touches && e.touches[0].clientX)
  const clientY = e.clientY || (e.touches && e.touches[0].clientY)

  if (clientX === undefined || clientY === undefined) return

  let newX = clientX - startOffset.value.x
  let newY = clientY - startOffset.value.y

  newX = Math.max(0, Math.min(windowSize.value.width - ballSize.value.width, newX))
  newY = Math.max(0, Math.min(windowSize.value.height - ballSize.value.height, newY))

  position.value = { x: newX, y: newY }
  e.preventDefault()
}

// 结束拖动
const endDrag = (e) => {
  const clientX = e.clientX || (e.changedTouches && e.changedTouches[0].clientX)
  const clientY = e.clientY || (e.changedTouches && e.changedTouches[0].clientY)

  const dx = Math.abs(clientX - dragStartPosition.value.x)
  const dy = Math.abs(clientY - dragStartPosition.value.y)

  if (dx < dragThreshold && dy < dragThreshold) {
    toggleWindow(e)
  }

  isDragging.value = false
  document.removeEventListener('mousemove', dragMove)
  document.removeEventListener('mouseup', endDrag)
  document.removeEventListener('touchmove', dragMove)
  document.removeEventListener('touchend', endDrag)

  applySnapEffect()
}

// 应用吸附效果
const applySnapEffect = () => {
  const centerX = position.value.x + ballSize.value.width / 2
  const centerY = position.value.y + ballSize.value.height / 2

  const toLeft = centerX
  const toRight = windowSize.value.width - centerX
  const toTop = centerY
  const toBottom = windowSize.value.height - centerY

  const minDistance = Math.min(toLeft, toRight, toTop, toBottom)

  if (minDistance < props.snapThreshold) {
    if (minDistance === toLeft) {
      position.value.x = 0
    } else if (minDistance === toRight) {
      position.value.x = windowSize.value.width - ballSize.value.width
    } else if (minDistance === toTop) {
      position.value.y = 0
    } else if (minDistance === toBottom) {
      position.value.y = windowSize.value.height - ballSize.value.height
    }
  }
}

// 切换侧边栏显示
const toggleRightSide = () => {

}

// 监听悬浮球位置变化
watch(position, () => {
  if (showWindow.value) {
    updateWindowPosition()
  }
}, { deep: true })
</script>

<style scoped lang="scss">
.drag-ball {
  position: fixed;
  cursor: grab;
  user-select: none;
  z-index: 9999;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.08),
  0px 9px 28px 0px rgba(0, 0, 0, 0.05),
  0px 12px 48px 16px rgba(0, 0, 0, 0.03);
  border-radius: 23px;
  text-align: center;
  color: #fff;
  background: #fff;

  &:active {
    cursor: grabbing;
  }

  #side-windows {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .problem-feedback {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      img {
        width: 24px;
        height: 24px;
      }

      .logo {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
      }
    }
  }
}

.floating-window {
  position: fixed;
  width: 300px;
  height: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  transition: all 0.3s ease;

  .window-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    content{
      display: flex;
      flex-direction: column;
      margin-bottom: 6px;
    }

    h4 {
      margin-top: 0;
      color: #333;
    }

    button {
      padding: 8px 16px;
      background: #3d84ff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: auto;

      &:hover {
        background: #2a6fd6;
      }
    }
  }
}

.window-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9997;
  background: transparent;
}
</style>
<!--
<template>
  <div
    ref="ball"
    class="drag-ball"
    :style="{
      left: position.x + 'px',
      top: position.y + 'px',
      zIndex: 9999,
      transition: isDragging ? 'none' : 'all 0.3s ease'
    }"
    @mousedown="startDrag"
    @touchstart="startDrag"
  >
    <div id="side-windows">
      <div class="shrink">
        <div class="problem-feedback" >
          <img :src="feedback" class="logo" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import feedbackImg from '@/assets/images/logo.svg'

const props = defineProps({
  distanceRight: { type: Number, default: 50 },
  distanceBottom: { type: Number, default: 100 },
  snapThreshold: { type: Number, default: 100 } // 吸附阈值(px)
})

// 状态管理
const ball = ref(null)
const feedback = ref(feedbackImg)
const position = ref({ x: 0, y: 0 })
const isDragging = ref(false)
const startOffset = ref({ x: 0, y: 0 })
const ballSize = ref({ width: 0, height: 0 })
const windowSize = ref({ width: window.innerWidth, height: window.innerHeight })

// 初始化
onMounted(() => {
  updateWindowSize()
  window.addEventListener('resize', updateWindowSize)

  if (ball.value) {
    const rect = ball.value.getBoundingClientRect()
    ballSize.value = { width: rect.width, height: rect.height }

    // 设置初始位置
    position.value = {
      x: windowSize.value.width - ballSize.value.width - props.distanceRight,
      y: windowSize.value.height - ballSize.value.height - props.distanceBottom
    }
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', updateWindowSize)
})

// 更新窗口尺寸
const updateWindowSize = () => {
  windowSize.value = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  }
}

// 开始拖动
const startDrag = (e) => {
  isDragging.value = true

  // 获取初始点击位置
  const clientX = e.clientX || e.touches[0].clientX
  const clientY = e.clientY || e.touches[0].clientY

  // 计算点击位置相对于元素左上角的偏移
  startOffset.value = {
    x: clientX - position.value.x,
    y: clientY - position.value.y
  }

  // 添加事件监听
  document.addEventListener('mousemove', dragMove)
  document.addEventListener('mouseup', endDrag)
  document.addEventListener('touchmove', dragMove, { passive: false })
  document.addEventListener('touchend', endDrag)

  // 阻止默认行为（避免文本选中）
  e.preventDefault()
}

// 拖动中
const dragMove = (e) => {
  if (!isDragging.value) return

  const clientX = e.clientX || (e.touches && e.touches[0].clientX)
  const clientY = e.clientY || (e.touches && e.touches[0].clientY)

  if (clientX === undefined || clientY === undefined) return

  // 计算新位置
  let newX = clientX - startOffset.value.x
  let newY = clientY - startOffset.value.y

  // 边界检查
  newX = Math.max(0, Math.min(windowSize.value.width - ballSize.value.width, newX))
  newY = Math.max(0, Math.min(windowSize.value.height - ballSize.value.height, newY))

  // 更新位置
  position.value = { x: newX, y: newY }

  // 阻止页面滚动
  e.preventDefault()
}

// 结束拖动（吸附逻辑）
const endDrag = () => {
  isDragging.value = false

  // 移除事件监听
  document.removeEventListener('mousemove', dragMove)
  document.removeEventListener('mouseup', endDrag)
  document.removeEventListener('touchmove', dragMove)
  document.removeEventListener('touchend', endDrag)

  // 应用吸附效果
  applySnapEffect()
}

// 应用吸附效果
const applySnapEffect = () => {
  const centerX = position.value.x + ballSize.value.width / 2
  const centerY = position.value.y + ballSize.value.height / 2

  // 计算到各边缘的距离
  const toLeft = centerX
  const toRight = windowSize.value.width - centerX
  const toTop = centerY
  const toBottom = windowSize.value.height - centerY

  // 确定最近的边缘
  const minDistance = Math.min(toLeft, toRight, toTop, toBottom)

  if (minDistance < props.snapThreshold) {
    if (minDistance === toLeft) {
      position.value.x = 0
    } else if (minDistance === toRight) {
      position.value.x = windowSize.value.width - ballSize.value.width
    } else if (minDistance === toTop) {
      position.value.y = 0
    } else if (minDistance === toBottom) {
      position.value.y = windowSize.value.height - ballSize.value.height
    }
  }
}

// 问题反馈
const showDialog = () => {
  const url = 'https://example.com/feedback'
  window.open(url, '_blank')
}
</script>

<style scoped lang="scss">
.drag-ball {
  position: fixed;
  cursor: grab;
  user-select: none;
  z-index: 9999;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  //background: #242b3a;
  box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.08),
  0px 9px 28px 0px rgba(0, 0, 0, 0.05),
  0px 12px 48px 16px rgba(0, 0, 0, 0.03);
  border-radius: 23px;
  text-align: center;
  color: #fff;

  &:active {
    cursor: grabbing;
  }

  #side-windows {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .problem-feedback {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      img {
        width: 24px;
        height: 24px;
        margin-bottom: 8px;
      }

      p {
        font-size: 12px;
        line-height: 1.4;
        margin: 0;
      }

      .logo {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto; /* 左右自动居中 */
      }
    }
  }
}
</style>
-->
